<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="framework/reset.css" rel="stylesheet">
        <link href="css/address.css" rel="stylesheet">
        <title>饿了么 收货地址</title>
    </head>
    <body>
        <div class="wrapper">
            <!-- header部分 -->
            <header>
                <div class="header-back" onclick="history.back()">
                    <i class="fa fa-angle-left"></i>
                </div>
                <p>收货地址</p>
                <div class="header-add" onclick="showAddressForm()">
                    <i class="fa fa-plus"></i>
                </div>
            </header>
            
            <!-- 地址列表部分 -->
            <div class="address-list">
                <!-- 默认地址 -->
                <div class="address-item default">
                    <div class="address-info">
                        <div class="address-header">
                            <span class="name">张三</span>
                            <span class="phone">138****5678</span>
                            <span class="default-tag">默认</span>
                        </div>
                        <div class="address-detail">
                            天津市津南区海河教育园区雅观路135号天津大学北洋园校区47教第6机房
                        </div>
                    </div>
                    <div class="address-actions">
                        <button class="edit-btn" onclick="editAddress(1)">
                            <i class="fa fa-edit"></i>
                        </button>
                        <button class="delete-btn" onclick="deleteAddress(1)">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 其他地址 -->
                <div class="address-item">
                    <div class="address-info">
                        <div class="address-header">
                            <span class="name">李四</span>
                            <span class="phone">159****8888</span>
                        </div>
                        <div class="address-detail">
                            天津市津南区海河教育园区雅观路135号天津大学北洋园校区学生宿舍1号楼
                        </div>
                    </div>
                    <div class="address-actions">
                        <button class="default-btn" onclick="setDefault(2)">设为默认</button>
                        <button class="edit-btn" onclick="editAddress(2)">
                            <i class="fa fa-edit"></i>
                        </button>
                        <button class="delete-btn" onclick="deleteAddress(2)">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                </div>
                
                <div class="address-item">
                    <div class="address-info">
                        <div class="address-header">
                            <span class="name">王五</span>
                            <span class="phone">186****6666</span>
                        </div>
                        <div class="address-detail">
                            天津市津南区海河教育园区雅观路135号天津大学北洋园校区教师公寓
                        </div>
                    </div>
                    <div class="address-actions">
                        <button class="default-btn" onclick="setDefault(3)">设为默认</button>
                        <button class="edit-btn" onclick="editAddress(3)">
                            <i class="fa fa-edit"></i>
                        </button>
                        <button class="delete-btn" onclick="deleteAddress(3)">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 添加地址按钮 -->
            <div class="add-address-btn">
                <button onclick="showAddressForm()">
                    <i class="fa fa-plus"></i>
                    添加新地址
                </button>
            </div>
            
            <!-- 地址表单弹窗 -->
            <div class="address-form-overlay" id="addressFormOverlay">
                <div class="address-form">
                    <div class="form-header">
                        <h3 id="formTitle">添加地址</h3>
                        <button class="close-btn" onclick="hideAddressForm()">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                    <div class="form-content">
                        <div class="form-group">
                            <label>联系人</label>
                            <input type="text" id="contactName" placeholder="请输入联系人姓名">
                        </div>
                        <div class="form-group">
                            <label>手机号</label>
                            <input type="tel" id="contactPhone" placeholder="请输入手机号">
                        </div>
                        <div class="form-group">
                            <label>所在地区</label>
                            <input type="text" id="addressRegion" placeholder="请选择省市区" readonly>
                        </div>
                        <div class="form-group">
                            <label>详细地址</label>
                            <textarea id="addressDetail" placeholder="请输入街道门牌信息"></textarea>
                        </div>
                        <div class="form-group checkbox-group">
                            <label>
                                <input type="checkbox" id="setAsDefault">
                                设为默认地址
                            </label>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button class="cancel-btn" onclick="hideAddressForm()">取消</button>
                        <button class="save-btn" onclick="saveAddress()">保存</button>
                    </div>
                </div>
            </div>
            
            <!-- 底部菜单部分 -->
            <ul class="footer">
                <li onclick="location.href='index.html'">
                    <i class="fa fa-home"></i>
                    <p>首页</p>
                </li>
                <li onclick="location.href='discover.html'">
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </li>
                <li onclick="location.href='orderList.html'">
                    <i class="fa fa-file-text-o"></i>
                    <p>订单</p>
                </li>
                <li onclick="location.href='profile.html'">
                    <i class="fa fa-user-o"></i>
                    <p>我的</p>
                </li>
            </ul>
        </div>
        
        <script src="js/address.js"></script>
    </body>
</html> 